<template>
  <view class="container">
    <u-navbar placeholder title="首页" leftIcon="" v-if="showHeader" :titleStyle="{color:'#FFF'}" bgColor="#0ea5e9" height="50px" />
    <!-- 头部区域 -->
    <view class="header">
      <view class="location-bar">
        <view class="location-info">
          <u-icon name="map" color="#FFF" size="16"></u-icon>
          <text class="location-text">{{ currentLocation }}</text>
        </view>
        <view class="weather-info">
          <text class="weather-text">{{ weather.temp }}°C {{ weather.desc }}</text>
        </view>
      </view>
      <view class="search-bar">
        <u-search placeholder="搜索工作、商家、景点..." v-model="searchKeyword" @search="handleSearch" @custom="handleSearch" :actionStyle="{color:'#FFF'}"></u-search>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <scroll-view scroll-y class="main-content" :style="{top: headerHeight + 'px'}">
      <!-- 功能导航 -->
      <view class="nav-grid">
        <navigator v-for="(item, index) in navItems" :open-type="item.isTab?'switchTab':'navigate'" :url="item.path">
          <view class="nav-item">
            <view class="nav-icon" :style="{backgroundColor: item.bgColor}">
              <u-icon :name="item.icon" :color="item.iconColor" size="24"></u-icon>
            </view>
            <text class="nav-text">{{ item.name }}</text>
          </view>
        </navigator>
      </view>

      <!-- 轮播图 -->
      <view class="banner-section">
        <u-skeleton rows="0" title :loading="loading" titleHeight="200" titleWidth="700upx"></u-skeleton>
        <u-swiper :list="bannerList" v-if="!loading" keyName="imageUrl" circular showTitle radius="10" height="200" @click="handleBannerClick"></u-swiper>
      </view>

      <!-- 找工作模块 -->
      <view class="section-container">
        <view class="section-header">
          <view class="section-title">
            <u-icon name="thumb-up" color="#0ea5e9" size="18"></u-icon>
            <text class="title-text">热门职位</text>
          </view>
          <text class="more-text" @click="handleNavZhaopinList">更多 ></text>
        </view>

        <view class="job-list">
          <navigator v-for="item in jobList" :key="item.id" open-type="navigate" :url="`/pages/zhaopin/detail?id=${item.id}`">
            <view class="job-item">
              <view class="job-info">
                <text class="job-title">{{ item.title }}</text>
                <text class="company-name">{{ item.company }}</text>
                <view class="job-tags">
                  <u-tag v-for="tag in item.tags" :key="tag" :text="tag" plain bg-color="#e0f2fe" color="#0369a1" border-color="transparent" size="mini" shape="circle"></u-tag>
                </view>
              </view>
              <view class="job-salary">
                <text class="salary-text">{{ item.salaryRange }}</text>
              </view>
            </view>
          </navigator>
        </view>
      </view>

      <!-- 商家推荐模块 -->
      <view class="section-container">
        <view class="section-header">
          <view class="section-title">
            <u-icon name="home" color="#10b981" size="18"></u-icon>
            <text class="title-text">推荐商家</text>
          </view>
          <text class="more-text" @click="handleNavShoplist">更多 ></text>
        </view>

        <scroll-view scroll-x class="merchant-scroll">
          <view class="merchant-list">
            <navigator v-for="merchant in merchantList" :key="merchant.id" open-type="navigate" :url="`/pages/shop/detail?id=${merchant.id}`">
              <view class="merchant-item">
                <u-image :src="merchant.logo" width="200rpx" height="160rpx" border-radius="16rpx" mode="aspectFill"></u-image>
                <text class="merchant-name">{{ merchant.name }}</text>
                <view class="merchant-rating">
                  <u-rate :value="merchant.rating" :count="5" :size="12" active-color="#fbbf24" inactive-color="#e5e7eb" :readonly="true"></u-rate>
                  <text class="rating-text">{{ merchant.rating }}</text>
                </view>
              </view>
            </navigator>
          </view>
        </scroll-view>
      </view>

      <!-- 景点推荐模块 -->
      <view class="section-container">
        <view class="section-header">
          <view class="section-title">
            <u-icon name="camera" color="#f59e0b" size="18"></u-icon>
            <text class="title-text">热门景点</text>
          </view>
          <text class="more-text" @click="handleNavScenicList">更多 ></text>
        </view>

        <view class="scenic-grid">
          <navigator v-for="scenic in scenicList" :key="scenic.id" open-type="navigate" :url="`/pages/scene/detail?id=${scenic.id}`">
            <view class="scenic-item">
              <view class="scenic-image">
                <u-image :src="scenic.face" width="100%" height="200rpx" border-radius="16rpx" mode="aspectFill"></u-image>
                <view class="scenic-price" v-if="scenic.price > 0">
                  <text class="price-text">¥{{ scenic.price }}</text>
                </view>
                <view class="scenic-price free-price" v-else>
                  <text class="price-text">免费</text>
                </view>
              </view>
              <text class="scenic-name">{{ scenic.name }}</text>
              <text class="scenic-location">{{ scenic.location }}</text>
            </view>
          </navigator>
        </view>
      </view>

      <!-- 特产展示模块 -->
      <view class="section-container">
        <view class="section-header">
          <view class="section-title">
            <u-icon name="gift" color="#ef4444" size="18"></u-icon>
            <text class="title-text">地方特产</text>
          </view>
          <text class="more-text" @click="handleNavProductList">更多 ></text>
        </view>

        <view class="product-grid">
          <navigator v-for="product in productList" :key="product.id" open-type="navigate" :url="`/pages/product/detail?id=${product.id}`">
            <view class="product-item">
              <u-image :src="product.face" width="100%" height="200rpx" border-radius="16rpx" mode="aspectFill"></u-image>
              <text class="product-name">{{ product.name }}</text>
              <view class="product-price">
                <text class="current-price">¥{{ product.price }}</text>
                <text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
              </view>
              <view class="product-sales">
                <text class="sales-text">已售{{ product.saleCount }}件</text>
              </view>
            </view>
          </navigator>
        </view>
      </view>

      <!-- 新闻资讯模块 -->
      <view class="section-container">
        <view class="section-header">
          <view class="section-title">
            <u-icon name="file-text" color="#8b5cf6" size="18"></u-icon>
            <text class="title-text">本地资讯</text>
          </view>
          <text class="more-text" @click="handleNavNewsList">更多 ></text>
        </view>

        <view class="news-list">
          <navigator v-for="news in newsList" open-type="navigate" :key="news.id" :url="`/pages/news/detail?id=${news.id}`">
            <view class="news-item">
              <view class="news-content">
                <text class="news-title">{{ news.title }}</text>
                <text class="news-summary">{{ news.summary }}</text>
                <view class="news-meta">
                  <text class="news-time">{{ news.createTime }}</text>
                  <text class="news-views">{{ news.viewCount }}阅读</text>
                </view>
              </view>
              <u-image :src="news.cover" v-if="news.cover" width="160rpx" height="120rpx" radius="10upx" mode="aspectFill"></u-image>
            </view>
          </navigator>
        </view>
      </view>

      <!-- 底部间距 -->
      <u-loadmore status="nomore" nomoreText="触碰到底线了" height="100px" line color="#808080" />
    </scroll-view>
  </view>
</template>

<script>
  import userAgent from '@/utils/userAgent'
  export default {
    data() {
      let showHeader = userAgent.isAppWebKit()
      console.log(showHeader)
      return {
        showHeader: !showHeader,
        loading: false,
        headerHeight: 180,
        currentLocation: '东川区',
        searchKeyword: '',
        currentTab: 0,
        // 天气信息
        weather: {
          temp: 22,
          desc: '晴'
        },

        // 导航菜单
        navItems: [
          { name: '找工作', icon: 'rmb-circle', isTab: true, bgColor: '#e0f2fe', iconColor: '#0ea5e9', path: '/pages/index/zhaopin' },
          { name: '找景点', icon: 'camera', isTab: true, bgColor: '#fef3c7', iconColor: '#f59e0b', path: '/pages/index/scene' },
          { name: '看特产', icon: 'gift', isTab: true, bgColor: '#fee2e2', iconColor: '#ef4444', path: '/pages/index/product' },
          { name: '找商家', icon: 'bag', bgColor: '#dcfce7', iconColor: '#10b981', isTab: false, path: '/pages/shop/shop' },
          { name: '房产', icon: 'home', bgColor: '#f3e8ff', iconColor: '#8b5cf6', isTab: false, path: '/pages/house/house' },
          { name: '租房', icon: 'coupon', bgColor: '#ecfdf5', iconColor: '#059669', isTab: false, path: '/pages/rentout/rentout' },
          { name: '交通岗', icon: 'moments', bgColor: '#fef7cd', iconColor: '#d97706', isTab: false, path: '/pages/traffic/traffic' },
          { name: '更多', icon: 'grid', bgColor: '#f1f5f9', iconColor: '#64748b', isTab: false, path: '/pages/more/more' }
        ],
        bannerList: [], // 轮播图

        // 职位列表
        jobList: [{
          id: 1,
          title: '前端开发工程师',
          company: '阿里巴巴',
          salaryRange: '15K-25K',
          tagsJson: `['Vue', 'React', '前端']`
        }],

        // 商家列表
        merchantList: [{
          id: 1,
          name: '老杭州菜馆',
          image: 'https://picsum.photos/300/200?tant-1.jpg',
          rating: 4.8
        }],

        // 景点列表
        scenicList: [{
          id: 1,
          name: '西湖风景区',
          location: '西湖区',
          face: 'https://picsum.photos/300/200?tnic-1.jpg',
          price: 0
        }],

        // 特产列表
        productList: [{
          id: 1,
          name: '西湖龙井茶',
          image: 'https://picsum.photos/300/200?tuct-1.jpg',
          price: 168,
          originalPrice: 228,
          sales: 1250
        }],

        // 新闻列表
        newsList: [{
          id: 1,
          title: '杭州地铁新线路即将开通，市民出行更便利',
          summary: '据悉，杭州地铁5号线将于下月正式开通运营，连接城东城西...',
          image: 'https://picsum.photos/300/200?tws-1.jpg',
          time: '2小时前',
          views: 1250
        }]
      }
    },
    onLoad() {
      const systemInfo = uni.getSystemInfoSync()
      this.headerHeight = systemInfo.statusBarHeight + 44 + 80 // 状态栏 + 导航栏 + 搜索栏
      this.fetchBanner()
      this.fetchZhaopin()
      this.fetchShop()
      this.fetchScenicList()
      this.fetchProductList()
      this.fetchNewsList()

    },
    methods: {
      fetchBanner() {
        uni.$u.http.get('/api/banner/list').then(response => {
          let { result, message, code } = response.data
          if (code !== 200) {
            this.$u.toast(message)
            return
          }
          this.bannerList = result.items

          // console.log(response.data)
        })
      },
      fetchZhaopin() {
        uni.$u.http.get('/api/zhaopin/list', { params: { pageSize: 5 } }).then(response => {
          let { result, message, code } = response.data
          if (code !== 200) {
            this.$u.toast(message)
            return
          }
          this.jobList = []
          for (let item of result.items) {
            item.tags = []
            if (item.tagsJson) {
              let list = JSON.parse(item.tagsJson)
              item.tags = list
            }
            this.jobList.push(item)
          }
          // console.log(response.data)
        })
      },
      fetchShop() {
        uni.$u.http.get('/api/shop/list', { params: { pageSize: 5 } }).then(response => {
          let { result, message, code } = response.data
          if (code !== 200) {
            this.$u.toast(message)
            return
          }
          this.merchantList = result.items
          // console.log(response.data)
        })
      },
      fetchScenicList() {
        uni.$u.http.get('/api/scene/list', { params: { pageSize: 6 } }).then(response => {
          let { result, message, code } = response.data
          if (code !== 200) {
            this.$u.toast(message)
            return
          }
          this.scenicList = []
          for (let item of result.items) {
            if (item.imageUrls) {
              let list = JSON.parse(item.imageUrls)
              item.face = list[0]
            }
            this.scenicList.push(item)
          }
          // console.log(response.data)
        })
      },
      fetchProductList() {
        uni.$u.http.get('/api/product/list', { params: { pageSize: 6 } }).then(response => {
          let { result, message, code } = response.data
          if (code !== 200) {
            this.$u.toast(message)
            return
          }
          this.productList = []
          for (let item of result.items) {
            if (item.imageUrls) {
              let list = JSON.parse(item.imageUrls)
              item.face = list[0]
            }
            this.productList.push(item)
          }
          // console.log(response.data)
        })
      },
      fetchNewsList() {
        uni.$u.http.get('/api/news/list', { params: { pageSize: 6 } }).then(response => {
          let { result, message, code } = response.data
          if (code !== 200) {
            this.$u.toast(message)
            return
          }
          this.newsList = result.items
          // console.log(response.data)
        })
      },
      handleSearch() {
        // 搜索
        console.log('搜索关键词:', this.searchKeyword)
        // 跳转到搜索结果页
      },

      handleNavTabPage(item) {
        // 导航点击 
        if (!item.isTab) {
          this.$u.route(item.path)
          return
        }
        this.$u.route({ url: item.path, type: 'switchTab' })
      },
      // 导航点击
      handleNavPage(item) {
        this.$u.route(item.path)
      },

      handleBannerClick(index) {
        // 轮播图点击
        console.log('点击轮播图:', index)
      },

      handleNavZhaopinList() {
        // 跳转职位列表
        this.$u.route({ url: '/pages/index/zhaopin', type: 'switchTab' })
      },

      handleNavZhaopinDetail(obj) {
        // 跳转职位详情 
        this.$u.route({ url: '/pages/zhaopin/detail', params: { id: obj.id } })
      },

      handleNavShoplist() {
        // 跳转商家列表
        this.$u.route('/pages/shop/shop')
      },

      handleNavShopDetail(obj) {
        // 跳转商家详情
        this.$u.route({ url: '/pages/shop/detail', params: { id: obj.id } })
      },

      handleNavScenicList() {
        // 跳转景点列表 
        this.$u.route({ url: '/pages/index/scene', type: 'switchTab' })
      },

      handleNavScenicDetail(obj) {
        // 跳转景点详情
        this.$u.route({ url: '/pages/scene/detail', params: { id: obj.id } })
      },

      handleNavProductList() {
        // 跳转特产列表
        // console.log('跳转特产列表')
        this.$u.route({
          url: '/pages/index/product',
          type: 'switchTab'
        })
      },

      handleNavProductDetail(obj) {
        // 跳转特产详情 
        this.$u.route({ url: '/pages/product/detail', params: { id: obj.id } })
      },

      handleNavNewsList() {
        // 跳转新闻列表 
        this.$u.route({
          url: '/pages/news/news'
        })
      },

      handleNavNewsDetail(obj) {
        // 跳转新闻详情 
        // console.log(obj)
        this.$u.route({ url: '/pages/news/detail', params: { id: obj.id } })
      },

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: calc(100vh - 100px);
    background: #f8fafc;
  }

  .header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    padding: 10rpx;

    .location-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;

      .location-info {
        display: flex;
        align-items: flex-start;
        gap: 8rpx;
        justify-content: center;
        align-items: center;

        .location-text {
          color: white;
          font-size: 28rpx;
          font-weight: 500;
        }
      }

      .weather-info {
        .weather-text {
          color: rgba(255, 255, 255, 0.9);
          font-size: 24rpx;
        }
      }
    }
  }

  .main-content {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 120rpx;
    background: #f8fafc;
  }

  .nav-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32rpx;
    padding: 32rpx;
    background: white;
    margin: 20upx;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16rpx;

      .nav-icon {
        width: 88rpx;
        height: 88rpx;
        border-radius: 22rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .nav-text {
        font-size: 24rpx;
        color: #334155;
        font-weight: 500;
      }
    }
  }


  .banner-section {
    margin: 20upx;
    min-height: 200upx;
  }

  .section-container {
    background: white;
    margin: 20upx;
    border-radius: 24rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32rpx;

    .section-title {
      display: flex;
      align-items: center;
      gap: 12rpx;

      .title-text {
        font-size: 32rpx;
        font-weight: 600;
        color: #1e293b;
      }
    }

    .more-text {
      font-size: 26rpx;
      color: #64748b;
    }
  }

  .job-list {
    .job-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #f1f5f9;

      &:last-child {
        border-bottom: none;
      }

      .job-info {
        flex: 1;

        .job-title {
          display: block;
          font-size: 28rpx;
          font-weight: 600;
          color: #1e293b;
          margin-bottom: 8rpx;
        }

        .company-name {
          display: block;
          font-size: 24rpx;
          color: #64748b;
          margin-bottom: 12rpx;
        }

        .job-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 8rpx;
        }
      }

      .job-salary {
        .salary-text {
          font-size: 28rpx;
          font-weight: 600;
          color: #059669;
        }
      }
    }
  }

  .merchant-scroll {
    white-space: nowrap;

    .merchant-list {
      display: flex;
      gap: 24rpx;

      .merchant-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12rpx;

        .merchant-name {
          font-size: 24rpx;
          color: #334155;
          text-align: center;
          width: 200rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .merchant-rating {
          display: flex;
          align-items: center;
          gap: 8rpx;

          .rating-text {
            font-size: 22rpx;
            color: #64748b;
          }
        }
      }
    }
  }

  .scenic-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;

    .scenic-item {
      .scenic-image {
        position: relative;
        margin-bottom: 12rpx;

        .scenic-price {
          position: absolute;
          bottom: 12rpx;
          right: 12rpx;
          background: linear-gradient(135deg, #059669, #10b981);
          color: white;
          padding: 8rpx 16rpx;
          border-radius: 16rpx;

          &.free-price {
            background: linear-gradient(135deg, #f59e0b, #f97316);
          }

          .price-text {
            font-size: 20rpx;
            font-weight: 600;
          }
        }
      }

      .scenic-name {
        display: block;
        font-size: 26rpx;
        font-weight: 500;
        color: #1e293b;
        margin-bottom: 8rpx;
      }

      .scenic-location {
        font-size: 22rpx;
        color: #64748b;
      }
    }
  }

  .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24rpx;

    .product-item {
      .product-name {
        display: block;
        font-size: 26rpx;
        font-weight: 500;
        color: #1e293b;
        margin: 12rpx 0 8rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .product-price {
        display: flex;
        align-items: center;
        gap: 12rpx;
        margin-bottom: 8rpx;

        .current-price {
          font-size: 28rpx;
          font-weight: 600;
          color: #ef4444;
        }

        .original-price {
          font-size: 22rpx;
          color: #94a3b8;
          text-decoration: line-through;
        }
      }

      .product-sales {
        .sales-text {
          font-size: 22rpx;
          color: #64748b;
        }
      }
    }
  }

  .news-list {
    .news-item {
      display: flex;
      gap: 24rpx;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #f1f5f9;

      &:last-child {
        border-bottom: none;
      }

      .news-content {
        flex: 1;

        .news-title {
          display: block;
          font-size: 28rpx;
          font-weight: 500;
          color: #1e293b;
          margin-bottom: 12rpx;
          line-height: 1.4;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .news-summary {
          display: block;
          font-size: 24rpx;
          color: #64748b;
          line-height: 1.5;
          margin-bottom: 16rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .news-meta {
          display: flex;
          gap: 24rpx;

          .news-time,
          .news-views {
            font-size: 22rpx;
            color: #94a3b8;
          }
        }
      }
    }
  }
</style>